
<template>
  <div id="app">
    <!-- 查询表单 -->
    <!--    欢迎{{this.user.username}}登录-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="通知类型">
        <el-select v-model="formInline.status" placeholder="全部类型" clearable>
          <el-option label="系统通知" value="系统通知"></el-option>
          <el-option label="活动通知" value="活动通知"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="通知标题">
        <el-input v-model="formInline.key" placeholder="请输入通知标题"></el-input>
      </el-form-item>

      <el-form-item label="客户端">
        <el-select v-model="formInline.status" placeholder="全部客户端" clearable>
          <el-option label="外卖APP" value="外卖APP"></el-option>
          <el-option label="商家APP" value="商家APP"></el-option>
          <el-option label="骑手APP" value="骑手APP"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-select v-model="formInline.createtime" placeholder="全部" clearable>
          <el-option label="近三个月" value="1"></el-option>
          <el-option label="今年内" value="2"></el-option>
          <el-option label="2022年" value="2"></el-option>
          <el-option label="2021年" value="2"></el-option>
          <el-option label="2020年以前" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-select v-model="formInline.createtime" placeholder="全部" clearable>
          <el-option label="近三个月" value="1"></el-option>
          <el-option label="今年内" value="2"></el-option>
          <el-option label="2022年" value="2"></el-option>
          <el-option label="2021年" value="2"></el-option>
          <el-option label="2020年以前" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用状态">
        <el-select v-model="formInline.status" placeholder="全部状态" clearable>
          <el-option label="待发布" value="1"></el-option>
          <el-option label="已发布" value="2"></el-option>
          <el-option label="已停用" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="toAdd()">发布通知</el-button>

    <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>

      <el-table-column
          prop="notificationType"
          label="通知类型"
      >
      </el-table-column>

      <el-table-column
          prop="notificationTitle"
          label="通知标题"
      >
      </el-table-column>

      <el-table-column
          prop="client"
          label="客户端"
      >
      </el-table-column>

      <el-table-column
          prop="releaseTime"
          label="发布时间"
      >
      </el-table-column>

      <el-table-column
          prop="creationTime"
          label="创建时间"
      >
      </el-table-column>

      <el-table-column
          prop="status"
          label="状态"
      >
        <template slot-scope="scope">
          {{scope.row.status==1?"待发布":(scope.row.status==2?"已发布":"已停用")}}
        </template>
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.status!=3&&scope.row.status==1" @click="toUpdate(scope.row.id)" size="mini">编辑通知</el-button>
          <el-button type="text" v-if="scope.row.status==1" @click="pushNotification(scope.row.id)" size="mini">立即推送</el-button>
          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,3)" size="mini">停用通知</el-button>
          <el-button type="text" v-if="scope.row.status==2" @click="zhuangtai(scope.row.id,3)" size="mini">停用通知</el-button>
          <el-button type="text" v-if="scope.row.status==3" size="mini">重新发布</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--添加弹窗-->
    <el-dialog
        title="编辑通知"
        :visible.sync="dialogVisible"
        width="45%">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="260px" class="demo-ruleForm">

        <el-form-item label="编号:" prop="name">
          {{this.ruleForm.id}}
        </el-form-item>

        <el-form-item label="通知类型:">
          <el-select v-model="ruleForm.notificationType" placeholder="请选择"  clearable>
            <el-option label="系统通知" value="系统通知"></el-option>
            <el-option label="活动通知" value="活动通知"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户端:">
          <el-select v-model="ruleForm.client" placeholder="请选择"  clearable>
            <el-option label="外卖APP" value="外卖APP"></el-option>
            <el-option label="商家APP" value="商家APP"></el-option>
            <el-option label="骑手APP" value="骑手APP"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知标题:" prop="name">
          <el-input v-model="ruleForm.notificationTitle" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="通知内容:">
          <div style="width: 300px;height: 300px">
            <quill-editor v-model="ruleForm.tznr" style="width: 300px;height: 100px"></quill-editor>
          </div>
        </el-form-item>

        <el-form-item label="跳转链接:" prop="name">
          <el-input v-model="ruleForm.tzlj" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="展示封面:" prop="sex">
          <el-radio-group v-model="ruleForm.fengmian">
            <el-radio :label="0">无封面</el-radio>
            <el-radio :label="1">单图</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="状态:">
          {{this.ruleForm.status==1?"待发布":(this.ruleForm.status==2?"已发布":"已停用")}}
        </el-form-item>

        <el-form-item label="创建时间:">
          {{this.ruleForm.creationTime}}
        </el-form-item>

        <el-form-item label="修改时间:">
          {{this.ruleForm.updatetime}}
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button type="danger" @click="dingshi(ruleForm.id)">定时推送</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--添加弹窗-->
    <el-dialog
        title="发布通知"
        :visible.sync="dialogVisible2"
        width="45%">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="260px" class="demo-ruleForm">

        <el-form-item label="通知类型:">
          <el-select v-model="ruleForm.notificationType" placeholder="请选择"  clearable>
            <el-option label="系统通知" value="系统通知"></el-option>
            <el-option label="活动通知" value="活动通知"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户端:">
          <el-select v-model="ruleForm.client" placeholder="请选择"  clearable>
            <el-option label="外卖APP" value="外卖APP"></el-option>
            <el-option label="商家APP" value="商家APP"></el-option>
            <el-option label="骑手APP" value="骑手APP"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知标题:" prop="name">
          <el-input v-model="ruleForm.notificationTitle" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="通知内容:">
          <div style="width: 300px;height: 300px">
            <quill-editor v-model="ruleForm.tznr" style="width: 300px;height: 100px"></quill-editor>
          </div>
        </el-form-item>

        <el-form-item label="跳转链接:" prop="name">
          <el-input v-model="ruleForm.tzlj" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="展示封面:" prop="sex">
          <el-radio-group v-model="ruleForm.fengmian">
            <el-radio :label="0">无封面</el-radio>
            <el-radio :label="1">单图</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--预警弹窗-->
    <el-dialog
        title="预警设置"
        :visible.sync="dialogVisible3"
        width="35%">
      <p>请选择当前时间之后2小时~7天进行定时推送：</p>
      <el-date-picker
          v-model="date"
          type="datetime"
          placeholder="选择日期时间"
          :picker-options="pickerOptions"
      >
      </el-date-picker>
      <span>本通知/广告将于北京时间{{formattedDate}}推送</span>
      <span slot="footer" class="dialog - footer">
           <el-button @click="dialogVisible = false">取消</el-button>
           <el-button type="primary" @click="confirmPush()">定时推送</el-button>
         </span>
    </el-dialog>

  </div>
</template>

<style >
.xl{
  width: 600px;
  height: 220px;
  //border: 1px solid red;
  margin-left: 100px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  //text-align: center;
}
.xy{
  width: 600px;
  height: 220px;
  //border: 1px solid red;
  margin-left: 100px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  //text-align: center;
}
.bs{
  width: 600px;
  height: 200px;
  //border: 1px solid red;
  margin-left: 100px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  //text-align: center;
}
.el-input{
  width:180px;
  margin-left: 40px;
}
</style>

<script>
// @ is an alias to /src
import axios from "axios"

export default {
  data(){
    return{
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      tableData:[],
      pageNum:1,
      pageSize:10,
      total:0,
      formInline:{},
      user:{},
      roomList:[],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      tx:[],
      ruleForm:{},
      ruleForm2:{},
      imageUrl:"",
      value1:[],
      yid:null,
      did:null,
      date: new Date(),
      pickerOptions: {
        disabledDate: (time) => {
          const currentTime = new Date();
          const twoHoursLater = new Date(currentTime.getTime() + 2 * 60 * 60 * 1000);
          const sevenDaysLater = new Date(currentTime.getTime() + 7 * 24 * 60 * 60 * 1000);
          return time < twoHoursLater || time > sevenDaysLater;
        }
      },
      formattedDate: '',
    }
  },
  methods: {
    /*！！！！！！！！！！！
    methods:这个里面定义的全部都是方法
    现在是spring boot+vue 框架
    不一样的就是在 从vue框架里面的methods里面
    通过方法去请求路径(请求的路径就是后台的路径)
    拿到数据放到下面的created()里面来加载数据才能在页面展示

    ***html使用ajxa 请求controller  controller把数据返回给前端 不再去跳转页面了***

     */
    confirmPush() {
      this.formattedDate = this.date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
      this.axios.get(`http://localhost:8111/dingshi/renwu?id=${this.did}&formattedDate=${this.formattedDate}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success("定时推送设置成功");
        } else {
          this.$message.error("定时推送设置失败");
        }
      })
      console.log('定时推送设置为：', this.formattedDate);
      this.dialogVisible3 = false;
    },
    dingshi(id) {
      this.did=id;
      this.dialogVisible3=true;
    },
    pushNotification(id) {
      this.axios.get(`http://localhost:8111/push/message?id=${id}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success("推送成功");
        } else {
          this.$message.error("推送失败");
        }
      })
    },
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-platform/xm-notification/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        // if (this.pageNum>res.data.data.pages){
        //   this.pageNum=res.data.data.pages;
        //   this.findPage();
        // }
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    toAdd() { //往添加对话框里清空数据
      this.dialogVisible2 = true;
      this.ruleForm2 = {};
    },
    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          // if (this.ruleForm.yxq == "指定日期"){
          //   this.ruleForm.yxq = this.value1[0] + "至" + this.value1[1];
          // }
          this.axios.post(`http://localhost:8000/xm-platform/xm-notification/add`, this.ruleForm).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.dialogVisible = false;
            } else {
              this.$message.error("添加失败");
            }
            this.dialogVisible = false;
            this.findPage();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) { //重置按钮点击可以重置
      this.$refs[formName].resetFields();
    },
    toUpdate(id) { //修改回显数据方法
      this.axios.get(`http://localhost:8000/xm-platform/xm-notification/findById?id=${id}`).then(res => {
        this.ruleForm = res.data.data;
        this.dialogVisible = true;
      })
    },
    del(id) { //删除方法
      this.$confirm("确定要删除吗?一旦删除,该条信息将不能恢复。", '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get(`http://localhost:9001/sbgl/deleteById?id=${id}`).then(res => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败！");
          }
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    zhuangtai(id, status) { //状态修改方法
      this.axios.get(`http://localhost:8000/xm-platform/xm-notification/zhuangtai?id=${id}&status=${status}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.data);
          this.findPage();
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    // toufang(id) { //状态修改方法
    //   this.axios.get(`http://localhost:8000/xm-platform/xm-notification/ggao?id=${id}`).then(res => {
    //     if (res.data.code == 200) {
    //       this.$message.success(res.data.data);
    //       this.findPage();
    //     } else {
    //       this.$message.error(res.data.data);
    //     }
    //   })
    // },
    tc(id) {
      this.dialogVisible2 = true;
      this.axios.get(`http://localhost:9001/sbgl/findById?id=${id}`).then(res => {
        this.ruleForm2 = res.data.data;
      })
    },
    guanbi() {
      this.dialogVisible = false;
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
    },
    xialaList() {
      this.axios.get(`http://localhost:9001/sbgl/xialaList`).then(res => {
        this.roomList = res.data.data;
      })
    },
    yujing(id){
      this.dialogVisible3=true;
      this.axios.get(`http://localhost:9001/sbgl/findById?id=${id}`).then(res => {
        this.ruleForm = res.data.data;
      })
    },
  },
  created() {
    this.findPage();//展示所有的数据
    // this.xialaList();//动态获取下拉框的数据
  }
}
</script>
